<template>
    <div class="TopForm">
        <div class="row">
            <el-button class="btn" @click="$router.push('/questions/new?add=item')" type="success" icon="el-icon-edit">新增试题</el-button>
            <span class="tips">说明：原版程序仅支持《学科》和《关键字》的条件搜索</span>
        </div>
        <el-form :model="form" ref="form">
            <div class="row">
                <div class="col">
                    <el-form-item label-width="68px" label="学科分类">
                        <el-select v-model="form.subjectID" placeholder="请选择">
                            <el-option
                                v-for="item in subjectTypeList"
                                :key="item.id"
                                :label="item.subjectName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col">
                    <el-form-item label-width="68px" label="二级目录">
                        <el-select v-model="form.catalogID" placeholder="请选择">
                            <el-option
                                v-for="item in catalogIDList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col">
                    <el-form-item label-width="68px" label="标签分类">
                        <el-select v-model="form.tags" placeholder="请选择">
                            <el-option
                                v-for="item in tagsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col last-col">
                    <el-form-item label-width="68px" label="关键字">
                        <el-input v-model.trim="form.keyword"></el-input>
                    </el-form-item>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <el-form-item label-width="68px" label="试题类型">
                        <el-select v-model="form.questionType" placeholder="请选择">
                            <el-option
                                v-for="item in questionTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col">
                    <el-form-item label-width="68px" label="难度等级">
                        <el-select v-model="form.difficulty" placeholder="请选择">
                            <el-option
                                v-for="item in difficultyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col">
                    <el-form-item label-width="68px" label="方向类型">
                        <el-select v-model="form.direction" placeholder="请选择">
                            <el-option
                                v-for="item in directionList"
                                :key=item
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col last-col">
                    <el-form-item label-width="68px" label="录入人">
                        <el-input v-model="form.creatorID"></el-input>
                    </el-form-item>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <el-form-item label-width="68px" label="题目备注">
                        <el-input v-model="form.remarks"></el-input>
                    </el-form-item>
                </div>

                <div class="col">
                    <el-form-item label-width="68px" label="企业简称">
                        <el-input v-model="form.shortName"></el-input>
                    </el-form-item>
                </div>

                <div class="col">
                    <el-form-item label-width="68px" label="城市归属">
                        <el-select v-model="form.province" placeholder="请选择">
                            <el-option
                                v-for="item in provinceList"
                                :key="item"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.city" placeholder="请选择">
                            <el-option
                                v-for="item in cityList"
                                :key="item"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="col btn-col last-col">
                    <el-button class="btn" @click="clear">清除</el-button>
                    <el-button class="btn" @click="search()" type="primary">搜索</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { getSubjectsList } from '@/api/hmmm/subjects'
import { getSimpleMenu } from '@/api/hmmm/directorys'
import { getCompanyList } from '@/api/hmmm/companys'
import { getSimpleTags } from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
import { citys, provinces } from '@/api/hmmm/citys'

export default {
    name: 'TopForm',
    created () {
        this.getSubjectsList()
        this.getSimpleMenu()
        this.getCompanyList()
        this.getSimpleTags()
    },
    data () {
        return {
            form: {},
            subjectTypeList: [],
            catalogIDList: [],
            tagsList: [],
            questionTypeList: [
                { label: '单选', value: '1' },
                { label: '多选', value: '2' },
                { label: '简答', value: '3' },
            ],
            difficultyList: [
                { label: '简单', value: 1 },
                { label: '一般', value: 2 },
                { label: '困难', value: 3 },
            ],
            directionList: direction,
            provinceList: provinces(),
            cityList: [],
        }
    },
    methods: {
        add () {

        },
        clear () {
            this.form = {}
            this.$emit('render', {})
        },
        search () {
            this.$message.warning('说明：原版程序仅支持《学科》和《关键字》的条件搜索')
            this.$emit('render', this.form)
        },
        async getSubjectsList () {
            const res = await getSubjectsList()
            this.subjectTypeList = res.data.items
        },
        async getSimpleMenu () {
            const res = await getSimpleMenu()
            this.catalogIDList = res.data
        },
        async getCompanyList () {
            const res = await getCompanyList()
            this.enterpriseIDList = res.data.items
        },
        async getSimpleTags () {
            const res = await getSimpleTags()
            this.tagsList = res.data
        },
    },
    watch: {
        'form.province': {
            handler (val) {
                this.$set(this.form, 'city', '')
                this.cityList = citys(val)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.TopForm {
    > .row {
        padding-bottom: 20px;

        .tips {
            color: #F56C6C;
            font-size: 13px;
            line-height: 36px;
            margin-left: 20px;
        }
    }

    .row {
        display: flex;

        .col {
            padding: 0 40px 0 0;
            flex: 1;

            ::v-deep .el-form-item {
                margin-bottom: 14px;

                .el-form-item__content {
                    display: flex;

                    .el-select {
                        width: 100%;
                    }

                    .el-input__inner {
                        height: 32px;
                        font-size: 13px;
                    }

                    div:nth-of-type(2) {
                        margin-left: 5px;
                    }
                }
            }
        }

        .btn-col {
            display: flex;
            justify-content: end;

            .btn {
                width: 65px;
                height: 32px;
                font-size: 13px;

                &:hover {
                    //background-color: #FFE2DD;
                }
            }
        }

        .last-col {
            padding: 0;
        }
    }
}
</style>
